<template>
  <!--外层盒子-->
  <div class="device_details_box">
    <header_component :name="data_analysis.code" @click="screenfull_btn"/>
    <div :style="{height:'2rem'}"></div>
    <!--    电流电压对比分析图-->
    <div class="device_details_line ">
      <echarts_double_line/>
      <!--      echarts_line-->
    </div>
    <div class="blank_height"></div>
    <!--    设备详情切片图-->
    <div>
      <device_time/>
      <!--      <device :width="1000" canvas="test" />-->
    </div>
    <div class="blank_height"></div>
    <!--    底部的box 内容采用水平布局-->
    <div class="device_details_bottom_echarts">
      <!--      设备基本信息-->
      <div class="echarts_item">
        <!--        模块名称-->
        <div class="template_title">
          设备基本信息
        </div>
        <device_basic/>
      </div>
      <!--      焊接参数异常统计-->
      <div class="echarts_item">
        <div class="template_title">
          焊接参数异常统计
        </div>
        <duration_statistics ref="duration_statistics" :details="store.state.dataDetails.details"/>
      </div>
      <!--      设备维保统计-->
      <div class="echarts_item">
        <div class="template_title">
          设备维保倒计时
        </div>
        <maintenance_statistics ref="maintenance_statistics" :details="store.state.dataDetails.details"/>
      </div>
      <!--      设备工作时长统计-->
      <div class="echarts_item">
        <div class="template_title">
          设备工作时长统计
        </div>
        <abnormal_statistics :details="store.state.dataDetails.details"/>
      </div>
      <!--      工件信息-->
      <div class="echarts_item" :style="{marginRight:0}">
        <div class="template_title">
          工件信息
        </div>
        <workpiece_information/>
      </div>
    </div>
    <!--    -->
    <div class="bottom_back">
      <a-button type="primary" shape="circle" @click="back_top">
        <template #icon><LeftOutlined style="color: white"  /></template>
      </a-button>
    </div>
  </div>
</template>

<script>
import header_component from "@/components/header/header_component";
import screenfull from "screenfull";
import device from "@/components/echart_components/device";
import device_time from "@/components/device/device_time";
import echarts_double_line from "@/components/echart_components/echart_double_line";
import {useStore} from "vuex";
import {reactive, onMounted} from "vue"
import device_basic from "@/components/echart_components/bottom_echarts/device_basic";
import workpiece_information from "@/components/echart_components/bottom_echarts/workpiece_information";
import abnormal_statistics from "@/components/echart_components/bottom_echarts/abnormal_statistics";
import duration_statistics from "@/components/echart_components/bottom_echarts/duration_statistics";
import maintenance_statistics from "@/components/echart_components/bottom_echarts/maintenance_statistics";
import {get_device_details} from "@/api/cockpit/data";
import {message} from "ant-design-vue";
import {useRoute, useRouter} from "vue-router";
import {decode_data} from "@/utils/base64";
import { LeftOutlined } from '@ant-design/icons-vue';


export default {
  name: "device_details",
  props: {
    details: {
      type: Object,
      default: {}
    }
  },
  setup() {
    const route = useRoute()
    const router = useRouter()
    const store = useStore()
    // 如果检测不到token 跟 status=江苏电力 就跳转到404
    try {
      if (store.getters.token) {
        // store.commit("SET_SCREEN", false)
      } else if (route.query.status) {
        store.commit("SET_SCREEN", true)
      } else {
        //  进入404
        router.replace('/index_exception')
      }
    } catch (e) {

    }

    onMounted(() => {
      if (route.query.status) {
        store.commit("SET_SCREEN", true)
        setTimeout(() => {
          screenfull_btn()
        }, 50)
      }

    })

    const back_top = ()=>{
      // if (route.query.status){
        router.back()
      // }
    }

    // if (route.query.status) {
    //   store.commit("SET_SCREEN", true)
    // }
    const data_analysis
        = reactive({
      isFullscreen: false,
      maintenanceList: [1, 23, 3, 3, 3],
      code: decode_data(route.query.uEquipmentCode)
    });
    /**
     * 是否全屏并按键ESC键的方法
     */
    const screenfull_btn = () => {
      if (screenfull.enabled) {
        console.log("错误")
        return false
      }
      data_analysis.isFullscreen = true
      screenfull.toggle()
    };
    const checkFull = () => {
      let isFull = screenfull.isFullscreen || window.fullScreen || document.webkitIsFullScreen || document.msFullscreenEnabled
      console.log(screenfull.isFullscreen)
      if (isFull === undefined) {
        isFull = false
        return isFull
      }
      return isFull
    };
    window.onresize = () => {
// 全屏下监控是否按键了ESC
//       console.log("按下ESC")
      if (!checkFull()) {
// 全屏下按键esc后要执行的动作
        data_analysis.isFullscreen = false
        console.log("全屏关闭")

        if (route.query.status) {
          debugger
          store.commit("SET_SCREEN", true)
        } else {
          store.commit("SET_SCREEN", false)
        }
      } else {
        console.log("全屏开启")
        store.commit("SET_SCREEN", true)
      }
    };
    const get_device_data = async () => {
      let params = {
        uEquipmentCode: decode_data(route.query.uEquipmentCode)
      }
      const res = await get_device_details(params)
      if (res.code === 1) {
        console.log("设备的基础数据", res)
        if (res.data) {
          store.commit("SET_DATA_TAILS", res.data)
        }
        return
      }
      message.warning(res.message)
    }

    get_device_data()

    return {
      screenfull_btn,
      data_analysis,
      store,
      route,
      back_top
    }

  },
  components: {
    echarts_double_line,
    device,
    device_time,
    header_component,
    device_basic,
    workpiece_information,
    abnormal_statistics,
    duration_statistics,
    maintenance_statistics,
    LeftOutlined
  }
}
</script>

<style scoped lang="scss">
.device_details_box {
  background: url("http://www.newhlty.tz-group.com/img/bg.82f8f7db.png") no-repeat top center;
  background-size: 100% 100%;
  height: 100%;
  position: relative;

  .device_details_line {
    width: 100%;
  }

  .device_details_bottom_echarts {
    display: flex;
    flex-direction: row;
    padding: 10px;

    .echarts_item {
      flex: 1;
      margin-right: 0.1rem;
      //background: #0c1c2d;

      .template_title {
        display: flex;
        justify-content: center;
        align-items: center;
        height: 2rem;
        color: #67e1fa;
        font-weight: bolder;
        margin-bottom: 0.2rem;
      }
    }
  }

  .bottom_back {
    position: absolute;
    top:1rem;
    left: 1rem;
  }
}
</style>
